<template>
    <div class="shopCart">
        <!--<div class="count">已选{{countTotal}}件商品</div>-->
        <!--<div class="price">总价格￥{{priceTotal}}</div>-->
        <!--<div class="contentLeft" @click="toend">结算</div>-->
        <mu-flexbox :gutter="gutter">
            <mu-flexbox-item class="flex-demo" grow="1.5">
                <mu-badge :content="count" circle secondary v-show="countTotal>0" class="shop-cart">
                    <mu-icon-button icon="shopping_cart" @click="open('bottom')"/>
                </mu-badge>
                <mu-icon-button icon="shopping_cart" v-show="countTotal<1"/>
              </mu-flexbox-item>
            <mu-flexbox-item class="flex-demo" grow="2">
                已选{{count}}件商品
              </mu-flexbox-item>
            <mu-flexbox-item class="flex-demo" grow="2">
                总价格￥{{price}}
              </mu-flexbox-item>
            <mu-flexbox-item class="flex-demo" grow="1.5">
                <mu-flat-button label="结算" class="demo-flat-button" @click="toend" primary/>
              </mu-flexbox-item>
        </mu-flexbox>
        <mu-popup position="bottom" popupClass="demo-popup-bottom" :open="bottomPopup" @close="close('bottom')">
            <mu-appbar title="购物车">
                <mu-flat-button slot="right" label="关闭" color="white" @click="close('bottom')"/>
            </mu-appbar>
            <ul>
                <template v-for="food in selectFoods">
                    <li class="food-item-cart">
                        <div class="food-item-cart-wrapper">
                            <span class="pdes">{{food.name}}</span>
                            <span class="price">单价￥{{food.price}}</span>
                            <cartcontrol class="cartcontrol" :food="food"></cartcontrol>
                        </div>
                    </li>
                    <mu-divider />
                </template>
                <li class="food-item-cart">
                    <div class="food-item-cart-wrapper">
                        <span class="tpdes">总价</span>
                        <span class="totalprice">￥{{price}}</span>
                        <mu-raised-button label="结算" class="demo-flat-button toend" @click="toend" secondary/>
                    </div>
                </li>
            </ul>
        </mu-popup>
    </div>
</template>

<script type="text/ecmascript-6">
  import TWEEN from 'tween.js'
  import cartcontrol from '../cartcontrol/cartcontrol.vue'
  export default {
    data: function () {
      return {
        count: '',
        price: 0,
        gutter: 1,
        bottomPopup: false
      }
    },
    components: {
      cartcontrol
    },
    props: {
//      实际在父组件中使用这个props的时候必须携程select-foods
      selectFoods: {
        type: Array
      }
    },
    computed: {
      countTotal () {
        let count = 0
        this.selectFoods.forEach((selectFood) => {
          count += selectFood.count
        })
        this.$store.dispatch('setTotalCount', count)
        this.count = String(count)
        return count
      },
      priceTotal () {
        let price = 0
        this.selectFoods.forEach((selectFood) => {
          price += selectFood.count * selectFood.price
        })
        this.$store.dispatch('setTotalPrice', price)
        return price
      }
    },
    methods: {
      toend () {
        this.$router.push('balance')
      },
      open (position) {
        this[position + 'Popup'] = true
      },
      close (position) {
        this[position + 'Popup'] = false
      }
    },
    created () {
      this.count = String(this.countTotal)
      this.price = this.priceTotal
    },
    watch: {
      priceTotal: function (newValue, oldValue) {
        var vm = this
        function animate (time) {
          requestAnimationFrame(animate)
          TWEEN.update(time)
        }
        new TWEEN.Tween({ tweeningNumber: oldValue })
          .easing(TWEEN.Easing.Quadratic.Out)
          .to({ tweeningNumber: newValue }, 800)
          .onUpdate(function () {
            vm.price = this.tweeningNumber.toFixed(0)
          }).start()
        animate()
      }
//      countTotal: function (newValue, oldValue) {
//        var vm = this
//        function animate (time) {
//          requestAnimationFrame(animate)
//          TWEEN.update(time)
//        }
//        new TWEEN.Tween({ tweeningNumber: oldValue })
//          .easing(TWEEN.Easing.Quadratic.Out)
//          .to({ tweeningNumber: newValue }, 500)
//          .onUpdate(function () {
//            vm.count = this.tweeningNumber.toFixed(0)
//          })
//          .start()
//        animate()
//      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
    @import "../../common/stylus/components/shopcart.styl"
    .shopCart
        position absolute
        bottom 0px
        left 0
        z-index 50
        width 100%
        height 48px
        .flex-demo
            height 48px
            color #fff
            line-height 48px
            text-align center
            background-color #424242
    .demo-popup-bottom
        width 100%
        max-width 375px
    .food-item-cart
        position relative
        width 100%
        height 50px
        line-height 50px
        .food-item-cart-wrapper
            width 100%
            .toend
                display inline-block
                position absolute
                right 16px
                bottom 7px
            .pdes
                display inline-block
                text-align left
            .price
                display inline-block
                position absolute
                left 150px
            .cartcontrol
                position absolute
                right 16px
                bottom 20px
</style>
